<template>
	<view class="page">
		<view class="header">
			<view class="dis-flex flex-x-between flex-y-center m-b-12">
				<view class="title f_normal">我的需求</view>
				<view class="f_normal f-c-000000 f_28">
					<text class="f-c-7f4aff">{{ need_count }}</text>
					/
					<text>{{ language_count }}</text>
				</view>
			</view>
			<view class="f_24 f_normal gery1">可以添加过个语种需求，可获得更多高精准的教师推荐</view>
		</view>
		<view class="content">
			<view class="course-list-box" v-if="courseList.length > 0">
				<view
					v-for="(item, index) in courseList"
					:key="index"
					class="item dis-flex flex-y-center flex-x-between"
					:data-index="index"
					@touchstart="drawStart"
					@touchmove="drawMove"
					@touchend="drawEnd"
					@click="skipDetail(item.need_question_id)"
					:style="{ right: item.right + 'rpx' }"
				>
					<view class="">
						<view :class="item.color">{{ item.language.title }}</view>
						<view class="dis-flex tag_box ">
							<text v-for="(content_item, index) in item.content" v-if="index < 3" :key="index" class="f_24 f_normal tag_item gery1">{{ content_item }}</text>
						</view>
					</view>
					<view class=""><image :src="imgPrefix('/static/image/icon/mine_next_icon.png')" lazy-load></image></view>
					<view class="remove f_24 dis-flex flex-dir-column flex-y-center flex-x-center" @click.stop="delItem(item.need_question_id)">
						<view class=""><image :src="imgPrefix('/static/image/icon/delete.png')" lazy-load></image></view>
						<view class="">删除</view>
					</view>
				</view>
			</view>
			<view class="default_image dis-flex flex-y-center flex-x-center flex-dir-column" v-else>
				<image :src="imgPrefix('/static/image/default_image.png')"></image>
				<view class="f_24 gery1 text">暂无需求</view>
			</view>
			<view class="btn" @click="needLanguage">
				<view class="btn-box f_28 f-c-7f4aff dis-flex flex-y-center flex-x-center">
					<image :src="imgPrefix('/static/image/icon/my_needs_add.png')"></image>
					<text>添加需求</text>
				</view>
			</view>
		</view>
		<zan-popup :show="showBalanceLow" :type="location" @close="closeBalanceLowPopup">
			<view class="popup-box">
				<view v-for="(item, indexpop) in popupList" :key="indexpop" class="item" @click="pitch(indexpop)">{{ item.title }}</view>
				<view class="cancel" @click="closeBalanceLowPopup">取消</view>
			</view>
		</zan-popup>
	</view>
</template>

<script>
import zanPopup from '@/components/popup/index.vue';
import { commonMixinFun } from '@/static/mixins/common.js';
import API from '@/static/api/index.js';
const app = getApp();
export default {
	components: {
		zanPopup
	},
	mixins: [commonMixinFun],
	onLoad: function(options) {
		var that = this;
		wx.getSystemInfo({
			success: function(res) {
				that.windowHeight = res.windowHeight;
			}
		});
	},
	onShow() {
		this._getAnswerQuestionList();
	},
	methods: {
		skipDetail(need_question_id) {
			app._log('detail------------------------');
			API.getNeedDetail(need_question_id).then(res => {
				if (res.code == 1) {
					let { title, language } = res.data.need;
					this.pageTo(
						'/pages/questionnaire/index',
						{
							need_id: need_question_id,
							result: JSON.stringify(title),
							color: language.icon_color,
							backgroundimage: language.backgroundimage,
							backgroundcolor: language.background_color,
							title: language.title,
							language_id: language.language_id
						},
						''
					);
				}
			});
		},
		_getAnswerQuestionList() {
			API.getAnswerQuestionList().then(res => {
				app._log(res);
				if (res.code == 1) {
					for (let i = 0; i < res.data.need.length; i++) {
						res.data.need[i].right = 0;
					}
					this.courseList = res.data.need;
					this.language_count = res.data.language_count;
					this.need_count = res.data.need_count;
				} else if (res.code == 405) {
					this.courseList = [];
				}
			});
		},
		pitch(index, delay = 0) {
			app._log('language_id::', index);
			setTimeout(() => {
				this.showBalanceLow = !this.showBalanceLow;
			}, delay);
			this.pageTo(
				'/pages/questionnaire/index',
				{
					color: this.popupList[index].icon_color,
					backgroundcolor: this.popupList[index].background_color,
					backgroundimage: this.popupList[index].backgroundimage,
					title: this.popupList[index].title,
					language_id: this.popupList[index].language_id
				},
				''
			);
		},
		// 关闭弹窗事件
		closeBalanceLowPopup(delay = 0) {
			setTimeout(() => {
				this.showBalanceLow = !this.showBalanceLow;
			}, delay);
		},
		drawStart: function(e) {
			// app._log("drawStart");
			var touch = e.touches[0];
			for (var index in this.courseList) {
				this.courseList[index].right = 0;
			}
			this.startX = touch.clientX;
		},
		drawMove: function(e) {
			var touch = e.touches[0];
			var item = this.courseList[e.currentTarget.dataset.index];
			var disX = this.startX - touch.clientX;

			if (disX >= 20) {
				if (disX > this.delBtnWidth) {
					disX = this.delBtnWidth;
				}
				this.isScroll = false;
				this.courseList[e.currentTarget.dataset.index].right = disX;
			} else {
				this.isScroll = true;
				this.courseList[e.currentTarget.dataset.index].right = 0;
			}
		},
		drawEnd: function(e) {
			var item = this.courseList[e.currentTarget.dataset.index];
			if (item.right >= this.delBtnWidth / 2) {
				this.isScroll = true;
				this.courseList[e.currentTarget.dataset.index].right = this.delBtnWidth;
			} else {
				this.isScroll = true;
				this.courseList[e.currentTarget.dataset.index].right = 0;
			}
		},
		needLanguage() {
			// this.closeBalanceLowPopup()
			API.getNeedLanguage().then(res => {
				if (res.code == 1) {
					this.popupList = res.data.languages;
					this.closeBalanceLowPopup();
				} else if (res.code == 405) {
					this.popupList = [];
				}
			});
		},
		delItem(need_question_id) {
			let that = this;
			uni.showModal({
				title: '提示',
				content: '您确定要删除该需求吗？',
				success: function(res) {
					if (res.confirm) {
						API.getAnswerDelete(need_question_id).then(res => {
							if (res.code == 1) {
								that.showToast('删除成功', 'success');
								setTimeout(() => {
									that._getAnswerQuestionList();
								}, 1000);
							} else {
								that.showToast(res.msg, 'success');
							}
						});
					} else if (res.cancel) {
						app._log('用户点击取消');
					}
				}
			});
		}
	},
	data() {
		return {
			popupList: [],
			location: 'bottom', //弹出层位置
			showBalanceLow: false, //是否地址弹出层
			delBtnWidth: 144,
			isScroll: true,
			windowHeight: 0,
			language_count: 0,
			need_count: 0,
			courseList: [
				// {
				// 	right:0,
				// 	color:"f-c-7948b4",
				// 	name:'韩语',
				// 	tag:[
				// 		{name:'幼稚园'},
				// 		{name:'教师上门'}
				// 	]
				// },
				// {
				// 	right:0,
				// 	color:"f-c-db6eac",
				// 	name:'日语',
				// 	tag:[
				// 		{name:'大学'},
				// 		{name:'大学上门'}
				// 	]
				// }
			]
		};
	}
};
</script>

<style scoped lang="scss">
.f-c-7948b4 {
	color: #7948b4;
}
.f-c-db6eac {
	color: #db6eac;
}
.f-c-7f4aff {
	color: #7f4aff;
}
.f-c-000000 {
	color: #000000;
}
.m-b-12 {
	margin-bottom: 12rpx;
}
.header {
	padding: 26rpx 48rpx;
	background-color: white;
	border-bottom: 16rpx solid #f4f4f4;
	position: fixed;
	width: 100vw;
	left: 0;
	top: 0;
	.title {
		font-size: 40rpx;
		color: #000000;
	}
}
.content {
	padding-top: 160rpx;
}
.course-list-box {
	background: white;
	.item {
		padding: 26rpx 48rpx;
		border-bottom: 1px solid #ededed;

		width: 100%;
		position: relative;
	}
	.tag_box {
		margin-top: 12rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 500rpx;
		margin-top: 12rpx;
	}
	.tag_item {
		margin-right: 24rpx;
	}
	image {
		width: 32rpx;
		height: 32rpx;
	}
}
.item:last-child {
	border-bottom: 0px;
}
.btn {
	margin: 40rpx 48rpx;
	border: 1px dashed #7f4aff;
	border-radius: 24rpx;
	.btn-box {
		padding: 26rpx 0;
		text-align: center;
		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
	}
}

.remove {
	width: 144rpx;
	height: 100%;
	color: #f84136;
	background: #f4f4f4;
	position: absolute;
	top: 0;
	right: -144rpx;
	image {
		width: 30rpx;
		height: 30rpx;
	}
}
.popup-box {
	width: 750rpx;
	background-color: white;
	border-radius: 48rpx 48rpx 0rpx 0rpx;
	text-align: center;
	.item {
		line-height: 112rpx;
		border-bottom: 1px solid #f9f9f9;
	}
	.cancel {
		border-top: 16rpx solid #f4f4f4;
		line-height: 112rpx;
	}
}
.default_image {
	position: relative;
	height: 396rpx;
	image {
		width: 396rpx;
		height: 396rpx;
	}
	.text {
		position: absolute;
		bottom: 95rpx;
	}
}
</style>
